<template>
  <div class="page-user-home">
    <div class="bar">
      <div class="tongji">
        <div class="item">
          <div class="name">{{ lang.t('account') }}</div>
          <div class="body">{{ tongji.account }}</div>
        </div>
        <div class="item">
          <div class="name">{{ lang.t('plugin') }}</div>
          <div class="body">{{ tongji.plugin }}</div>
        </div>
        <div class="item">
          <div class="name">{{ lang.t('stop') }}</div>
          <div class="body"><span>{{ userStore.getData().stop_at }}</span></div>
        </div>
      </div>
      {{ lang.t('welcome') }} {{ userStore.getData().name }}
      <div class="tip">
        {{ lang.t('tip') }}
      </div>
    </div>
    <t-row :gutter="20">
      <t-col :sm="6" :md="7" :lg="8" :xxl="9">
        <Plugin @my="data => tongji.plugin = data" />
      </t-col>
      <t-col :sm="6" :md="5" :lg="4" :xxl="3" >
        <News />
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'
  import { account } from '@/api/manage/user'
  import News from './news.vue'
  import Plugin from './plugin.vue'
  
  const lang = app.lang.space('page.user.home')
  const tongji = reactive({
    account: 0,
    plugin: 0
  })

  // 加载店员数量
  account().then(res => {
    tongji.account = res.length
  })
</script>

<style lang="scss">
  @import '@/style/global';

  .page-user-home{
    .bar{
      font-size: 25px;
      .tip{
        padding-top: 10px;
      }
    }

    .tongji{
      float: right;
      display: flex;
      .item{
        padding: 5px 0 0 50px;
        .name{
          font-size: 14px;
        }
        .body{
          font-size: 20px;
          padding-top: 10px;
          span{
            color: $color;
          } 
        }
      }
    }

    .news{
      min-height: 495px;
      .item{
        padding: 10px 0;
        cursor: pointer;

        &:hover .title{
          color: $color;
        }

        .title{
          color: $color-content;
          font-size: 14px;
          line-height: 20px;
        }

        .time{
          font-size: 12px;
          color: $color-body;
          line-height: 20px;
          text-align: right;
        }

        .on{
          margin-top: -10px;
          padding-bottom: 10px;
          
          .title{
            color: $color;
            font-size: 20px;
            line-height: 25px;
            padding-bottom: 10px;
            text-align: center;
          }

          .time{
            text-align: center;
          }
        }
      }
    }

    .plugin{
      min-height: 470px;
      .title{
        color: $color-title;
        font-size: 20px;
        padding-bottom: 20px;
        font-weight: bold;
      }

      .item{
        margin-bottom: 20px;
        border: 1px $color-border solid;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        position: relative;

        .name{
          padding-top: 10px;
          color: $color-title;
          font-size: 16px;  
        }
        .body{
          color: $color-body;
          font-size: 12px;
          padding-top: 7px;
        }
        img{
          margin: 0 auto;
          height: 70px;   
        }

        .ok{
          font-size: 20px;
          color: $color;
          position: absolute;
          right: 10px;
          top: 5px; 
        }
      }
    }
  }
</style>